<style lang="less">
@import "./style.less";
</style>
<template>
    <div class="user">
        <div class="op-header">
            <el-button @click="add"
                       class="add"
                       size="small"
                       type="info">
                <i class="el-icon-circle-plus icon-right" />新增试卷
            </el-button>
            <div class="search">
                <el-cascader :clearable="true"
                             :options="enableOptions"
                             :props="cascaderProps"
                             class="enable-select"
                             placeholder="启用状态"
                             v-model="enableValue" />
                <el-input class="search-input"
                          placeholder="请输入查询关键字"
                          prefix-icon="el-icon-search"
                          size="small"
                          v-model="searchInput" />
                <el-button @click="search"
                           class="search-button"
                           size="small"
                           type="primary">
                    <i class="el-icon-search icon-right" />查询
                </el-button>
            </div>
        </div>
        <table-ex :columns="columns"
                  :on-operation="onClickOperation"
                  :on-option="onClickOption"
                  :on-page-change="onPageChange"
                  :options="options"
                  :rows="paperList.content"
                  :total="paperList.total" />
        <dialog-ex :ctrl-values="torgins"
                   :form="form"
                   :init="currentPaper"
                   :mode="dialogModal"
                   :popup-focus="popupFocus"
                   :popup-value="businessTemplate"
                   :title="this.dialogModal === 'add' ? '新增试卷' : '编辑试卷'"
                   v-if="dialogModal" />
        <dialog-ex :form="businessWeightTable"
                   :init="examPaper"
                   :mode="businessWeightModal"
                   :title="businessWeightTitle"
                   v-if="businessWeightModal" />
        <multistage :data="leftData"
                    :default-props="multistageProps"
                    :initData="businessIds"
                    :modal-cancel="multistageCancel"
                    :modal-confirm="multistageConfirm"
                    :table-columns="multistageColumns"
                    :table-rows="businessTemplet"
                    :tree-node-click="(row, path) => multistageNodeClick(row, path)"
                    title="选择业务"
                    v-if="multistageModal" />
    </div>
</template>

<script>
    import { mapGetters, mapActions, mapMutations } from "vuex";
    import pageConfig from "./config";
    import api from "@/api";

    import tableEx from "@/components/table/tableEx";
    import dialogEx from "@/components/dialog/dialogEx";
    import multistage from "@/components/custom/multistage";

    export default {
        name: "user",
        components: {
            "table-ex": tableEx,
            "dialog-ex": dialogEx,
            multistage: multistage
        },
        data() {
            return {
                searchInput: "",
                enableValue: [],
                departmentValue: "",
                multistageProps: pageConfig.multistageProps,
                columns: pageConfig.columns,
                businessTempletId: [],
                relationIds: [],
                businessIds: [],
                businessTemplate: "",
                multistageModal: false,
                options: pageConfig.options,
                enableOptions: pageConfig.enableOptions,
                multistageColumns: pageConfig.multistageColumns,
                torgins: pageConfig.torgins,
                cascaderProps: {
                    value: "practiceType",
                    label: "name",
                    children: "subClasses"
                },
                dialogModal: "",
                currentPaper: {},
                businessWeightTitle: "",
                businessWeightModal: "",
                examPaper: {},
                businessWeightTable: {
                    items: [
                        {
                            name: "tablex",
                            columns: [
                                {
                                    prop: "businessScore",
                                    label: "权重分数",
                                    edit: "input",
                                    type: "number",
                                    width: 120
                                },
                                {
                                    prop: "name",
                                    label: "模版名称",
                                    width: 250
                                },
                                {
                                    prop: "classFullPathJson",
                                    label: "所属模块",
                                    width: 300
                                },
                                {
                                    prop: "comment",
                                    label: "介绍说明",
                                    width: 250
                                }
                            ]
                        }
                    ],
                    actions: {
                        cancel: () => {
                            this.businessWeightModal = null;
                        },
                        confirm: (data, mode) => {
                            console.log("weight score confirm >> ", data, mode);
                            if (data && data.id && data.rows) {
                                const businessScores = data.rows.map(row => {
                                    return {
                                        businessId: row.id,
                                        businessScore: row.businessScore
                                    };
                                });
                                const examPaperBusinessScores = {
                                    examPaperId: data.id,
                                    businessScores
                                };
                                console.log(
                                    "examPaperBusinessScores >> ",
                                    examPaperBusinessScores
                                );
                                this.saveExamPaperBusinessScores(
                                    examPaperBusinessScores
                                );
                            }
                            this.businessWeightModal = null;
                        }
                    }
                },
                leftData: [],
                form: {
                    items: pageConfig.addExamFormItems,
                    default: {
                        enabled: true
                    },
                    disableFlag: this.disableFlag,
                    actions: {
                        cancel: () => {
                            this.dialogModal = null;
                        },
                        confirm: (data, mode) => {
                            if (data.practiceType && data.practiceType.length > 1) {
                                data.practiceSpecificType = data.practiceType[1];
                                data.practiceType = data.practiceType[0];
                            } else if (
                                data.practiceType &&
                                data.practiceType.length > 0
                            ) {
                                data.practiceType = data.practiceType[0];
                            } else {
                                data.practiceSpecificType = null;
                                data.practiceType = null;
                            }
                            if (mode === "add") {
                                this.AddPage({
                                    data,
                                    cb: res => {
                                        this.addbusinessRelation(res);
                                    }
                                });
                            }
                            if (mode === "edit") {
                                this.addbusinessRelation(this.currentPaper);
                                this.UpdateOnePage(data);
                            }
                            this.dialogModal = null;
                        }
                    }
                }
            };
        },
        computed: {
            ...mapGetters(["paperList", "businessTemplet", "businessTree"])
        },

        created() {},

        mounted() {
            this.loadInitData();
        },

        methods: {
            ...mapActions([
                "GetPaperList",
                "RemoveOneData",
                "AddPage",
                "QueryFindPage",
                "createPaper",
                "getBusinessTreeData",
                "getBusinessList",
                "UpdateOnePage",
                "saveExamPaperBusinessScores"
            ]),

            ...mapMutations([
                "SetPaperData",
                "SETPAPERPAGE",
                "SETBUSINESSTREETEMPLET"
            ]),

            loadInitData() {
                this.GetPaperList();
                this.getBusinessTreeData();
            },
            add() {
                this.businessTempletId = [];
                this.relationIds = [];
                this.businessIds = [];
                this.businessTemplate = "";
                this.form.items.map(item => {
                    if (item.prop === "practiceType") {
                        item.disabled = false;
                    }
                });
                this.dialogModal = "add";
            },

            search() {
                const filter = {
                    name: this.searchInput,
                    enabled: !!this.enableValue ? this.enableValue[0] : null
                };
                this.SETPAPERPAGE({
                    number: 1,
                    pages: 0,
                    filter
                });
                this.GetPaperList();
            },

            batchOption() {},

            onClickOption(option, rows) {
                const prop = option;
                switch (prop) {
                    case "batchdelete": {
                        let id = rows.map(item => {
                            return item.id;
                        });
                        this.RemoveOneData(id);
                        break;
                    }
                    case "refresh": {
                        this.loadInitData();
                        break;
                    }
                    default: {
                    }
                }
            },

            onClickOperation(oper, row) {
                console.log("onClickOperation >> ", oper, row);
                let optstyle = oper.prop;
                const prop = oper.prop;
                switch (prop) {
                    case "delete": {
                        this.RemoveOneData([row.id]);
                        break;
                    }
                    case "edit": {
                        api.queryOnePaper(row.id, {
                            success: res => {
                                if (
                                    res.businessTemplates &&
                                    res.businessTemplates.length
                                ) {
                                    this.businessIds = res.businessTemplates.map(
                                        item => item.id
                                    );
                                    this.businessTemplate =
                                        this.businessIds &&
                                        this.businessIds.length > 0
                                            ? `已选${
                                                  this.businessIds.length
                                              }个业务模块`
                                            : "";
                                } else {
                                    this.businessIds = []
                                    this.businessTemplate = ""
                                }

                                if (res.practiceType && res.practiceSpecificType) {
                                    res.practiceType = [
                                        res.practiceType,
                                        res.practiceSpecificType
                                    ];
                                } else {
                                    res.practiceType = res.practiceType ? [res.practiceType] : [];
                                }

                                this.disableFlag(res.practiceType[0], "practiceType");

                                this.currentPaper = res;
                                this.dialogModal = "edit";
                            }
                        });
                        break;
                    }
                    case "weight_edit": {
                        api.queryOnePaper(row.id, {
                            success: res => {
                                this.businessWeightTitle =
                                    "业务权重分数设置: " + res.name;
                                this.examPaper = {
                                    id: res.id,
                                    name: res.name,
                                    rows: res.businessTemplates
                                };
                                this.businessWeightModal = "weight_edit";
                            }
                        });
                        break;
                    }
                    default: {
                    }
                }
            },

            onPageChange(number) {
                this.SETPAPERPAGE({ number });
                this.GetPaperList();
            },

            popupFocus() {
                this.leftData = this.businessTree;
                this.SETBUSINESSTREETEMPLET({
                    businessTemplet: []
                });
                this.multistageModal = true;
            },

            multistageNodeClick(row, path) {
                let params = {
                    filter: {
                        classIds: path,
                        enabled: true,
                        name: null
                    },
                    size: 100,
                    number: 0,
                    total: 0,
                    pages: 0
                };
                this.getBusinessList(params);
            },

            multistageConfirm(results) {
                this.multistageModal = false;

                if (results.length) {
                    this.businessIds = [];
                    this.businessIds = results;
                    this.businessTemplate =
                        this.businessIds && this.businessIds.length > 0
                            ? `已选${this.businessIds.length}个业务模块`
                            : "";
                    this.disableFlag(true, "businessIds");
                } else {
                    this.businessIds = [];
                    this.businessTemplate = "";
                    this.disableFlag(false, "businessIds");
                }
            },

            multistageCancel(e) {
                this.multistageModal = false;
            },

            addbusinessRelation(objc) {
                if (this.businessIds) {
                    let data = {
                        id: objc.id,
                        action: "replace",
                        lIds: this.businessIds
                    };
                    api.addBusinessRelation(data, {
                        success: res => {}
                    });
                }
            },
            disableFlag(value, prop) {
                console.log("disableFlag >> ", value, prop, "businessIds >>", this.businessIds);
                if (prop == "practiceType") {
                    let formItem = this.form.items.find(
                        item => item.prop === "businessIds"
                    );
                    formItem.disabled = value !== "business";
                }
            }
        }
    };
</script>
